<template>
  <div class="main_center column-flex">
    <EventLevel
      :data="topData"
      @handleClickLevelCode="handleClickLevelCode"
    ></EventLevel>
    <div class="center-middle">
      <h1 class="left-title">推荐处置事件</h1>
      <div class="center-middle-cont">
        <CycleComponent
          :time="listData.length < 3 ? 0 : 20"
          :paused="listData.length < 3"
          v-if="listData.length > 0"
        >
          <template v-for="(item, index) in listData">
            <HandlingEvents
              :data="item"
              :index="index"
              @handleClick="handleEventClick"
            ></HandlingEvents>
          </template>
        </CycleComponent>
        <div class="empty-box" v-else>暂无数据</div>
      </div>
    </div>
    <div class="box center-bottom">
      <h1 class="left-title">事件发生趋势</h1>
      <el-radio-group
        class="left-title-btn"
        v-model="views"
        size="mini"
        @change="handleChange"
      >
        <el-radio-button label="0">事件级别</el-radio-button>
        <el-radio-button label="1">事件类型</el-radio-button>
      </el-radio-group>
      <line-echarts
        ref="lineEchartRef"
        @mouseleave="handleMouseLeave"
        @mouseover="handleMouseover"
      />
    </div>
    <!--  头部类型级别   -->
    <searchDialog
      ref="safeConcernsDialogRef"
      title="事件列表"
      :searchFormObj="imgFormObj"
      :tableList="imgTableData.imgTableList"
      :tableData="imgTableData.tableData"
      :total="imgTableData.total"
      :operate-open="true"
      @getTableList="getsafeConcernTableList"
      @operateEvent="operateEvent"
    ></searchDialog>
  </div>
</template>

<script>
import EventLevel from "@/components/common/EventLevel.vue";
import lineEcharts from "@/components/echarts/internet/lineEcharts";
import HandlingEvents from "@/components/common/HandlingEvents";
import CycleComponent from "@/components/common/cycleComponent.vue";
import {
  levelCount,
  typeTrend,
  levelTrend,
  disposalEvent,
  eventList,
} from "@/api/confidentialitySupervision.js";
import searchDialog from "@/components/common/searchDialog";
import { cloneDeep } from "@/utils/loadash-es";
import obj from "@/components/index/comprehensiveSituation/components/tableData";
import { mapState } from "vuex";
import { parseTime } from "@/utils/hongke";

export default {
  components: {
    EventLevel,
    lineEcharts,
    HandlingEvents,
    CycleComponent,
    searchDialog,
  },
  data() {
    return {
      // 事件总件数
      topData: [
        { normalName: "特别重大事件", count: 0, proportion: "0%", ring: "0%" },
        { normalName: "重大事件", count: 0, proportion: "0%", ring: "0%" },
        { normalName: "较大事件", count: 0, proportion: "0%", ring: "0%" },
        { normalName: "一般事件", count: 0, proportion: "0%", ring: "0%" },
      ],
      // 推荐处置事件
      listData: [],
      queryParams: {},
      views: 0,
      imgFormObj: {
        fieldList: cloneDeep(obj.imgFormObj.fieldList),
        searchData: {},
        btnHidden: true,
        listTypeInfo: {
          levelCodeList: this.$store.state.levelCodeList,
          categoryCodeList: this.$store.state.categoryCodeList,
          typeCodeList: this.$store.state.typeCodeList,
          protectCodeList: this.$store.state.protectCodeList,
        },
        //  是否有额外的参数
        isNeedResetExtraParam: false,
      },
      imgTableData: {
        imgTableList: cloneDeep(obj.imgTableList),
        tableData: [],
        total: 0,
      },
      event_trend_timer: null,
    };
  },
  computed: {
    ...mapState([
      "levelCodeList",
      "typeCodeList",
      "categoryCodeList",
      "protectCodeList",
      "searchType",
      "time"
    ]),
  },
  watch: {
    time:{
      handler(val) {
        if(val && val[0]){
          this.queryParams.searchType=this.$store.state.searchType!='custom'?this.$store.state.searchType:null;
          if(this.$store.state.searchType!='custom'){
            this.queryParams.time=null
          }else{
            this.queryParams.time=this.$store.state.time
          }
          this.getLevelCount();
          this.getLevelTrend();
          this.getDisposalEvent();
        }
      },
      immediate: true,
      deep: true,
    },
    levelCodeList: {
      handler(val) {
        this.imgFormObj.listTypeInfo.levelCodeList = val;
      },
      immediate: true,
      deep: true,
    },
    typeCodeList: {
      handler(val) {
        this.imgFormObj.listTypeInfo.typeCodeList = val;
      },
      immediate: true,
      deep: true,
    },
    categoryCodeList: {
      handler(val) {
        this.imgFormObj.listTypeInfo.categoryCodeList = val;
      },
      immediate: true,
      deep: true,
    },
  },
  mounted() {
    this.dataLoop();
  },
  methods: {
    // 获取头部事件类型
    getLevelCount() {
      levelCount(this.queryParams).then((res) => {
        this.topData = res[0].children;
      });
    },
    //  获取推荐处置事件
    getDisposalEvent() {
      disposalEvent(this.queryParams).then((res) => {
        this.listData = res.list.length>10?res.list.slice(0,10):res.list
      });
    },
    // 获取事件发生趋势-事件级别
    getTypeTrend() {
      typeTrend(this.queryParams).then((res) => {
        this.$refs.lineEchartRef.getData(res);
      });
    },
    // 获取事件发生趋势-事件类型
    getLevelTrend() {
      levelTrend(this.queryParams).then((res) => {
        this.$refs.lineEchartRef.getData(res);
      });
    },
    // 事件发生趋势-切换按钮
    handleChange() {
      if (this.views == "0") {
        this.getLevelTrend();
      } else {
        this.getTypeTrend();
      }
    },
    /** 推荐处置事件  */
    handleEventClick(val) {
      window.open(window.urlPrefix + "dispose/incidentHandle/detail?showBack=false&ids=" + val);
    },
    /**  top部事件级别---弹窗详情 */
    operateEvent(val) {
      window.open(
        window.urlPrefix + "dispose/incidentHandle/detail?showBack=false&ids=" + val.row.id
      );
    },
    /** 事件级别点击 */
    handleClickLevelCode(param) {
      this.queryEventList({ levelCode: param.normalCode, ...this.queryParams });
      this.imgFormObj.searchData = {
        levelCode: param.normalCode,
        ...this.queryParams,
      };
      setTimeout(() => {
        this.$refs.safeConcernsDialogRef.open = true;
      }, 500);
    },
    /** 列表查询 */
    queryEventList(query) {
      eventList(query).then((res) => {
        this.imgTableData.total = res.total;
        this.imgTableData.tableData = res.list;
      });
    },
    /***  弹窗搜索 */
    getsafeConcernTableList(data) {
      if (data?.time) {
        data.time.forEach((i, index) => {
          data.time[index] = parseTime(i, "{y}-{m}-{d}T{h}:{i}:{s}");
        });
      }
      this.queryEventList(data);
    },
    /** 循环 */
    dataLoop() {
      this.event_trend_timer = setInterval(() => {
        this.views = this.views == "0" ? "1" : "0";
        this.handleChange();
      }, 20000);
    },
    handleMouseover() {
      clearInterval(this.event_trend_timer);
    },
    handleMouseLeave() {
      this.dataLoop();
    },
  },
  destroyed() {
    clearInterval(this.event_trend_timer);
  },
};
</script>

<style lang="scss" scoped>
.empty-box {
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  height: 100%;
  border-radius: 4px;
  border: 1px solid rgba(59, 139, 255, 0.4);
  background-color: rgba(59, 139, 255, 0.1);
}
.center-middle {
  height: 46%;
}

.center-bottom {
  height: 32%;
  position: relative;

  .left-title-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
  }
}

.center-middle-cont {
  height: calc(100% - 3rem);
  overflow: hidden;
}

::v-deep .header-item {
  width: 14rem;
  height: 3.75rem !important;
  line-height: 3.75rem !important;
}

::v-deep .ceil {
  width: 14rem;
  height: 4rem !important;
  line-height: 4rem !important;
}

::v-deep .row-item {
  height: 4rem !important;
  line-height: 4rem !important;
}

::v-deep {
  .el-radio-button {
    margin-right: 10px;
    // background-image: linear-gradient(
    //   to bottom,
    //   rgba(15, 38, 110, 0.6) 0%,
    //   rgba(26, 101, 174, 0.6) 100%
    // );
    // border: 1px solid rgba(59, 139, 255, 0.6);
  }

  .el-radio-button__inner:hover {
    color: #fff;
  }

  .el-radio-group
    .el-radio-button__orig-radio:checked
    + .el-radio-button__inner {
    background-image: linear-gradient(
      to bottom,
      rgba(0, 140, 164, 0.6) 0%,
      rgba(0, 222, 226, 0.6) 100%
    );

    border-radius: 4px;
  }
}
</style>
